<template>
  <div>
    <div class="container" :style='{"minHeight":"100vh","padding":"150px 0 180px","alignItems":"center","background":"url(https://img.freepik.com/free-photo/stack-books-library_23-2147845946.jpg) no-repeat center center / cover, linear-gradient(120deg, #f8f4e9, #d2b48c)","display":"block","width":"100%","justifyContent":"center","position":"relative"}'>
      <div class="overlay" :style='{"position":"absolute","top":"0","left":"0","width":"100%","height":"100%","background":"rgba(139, 69, 19, 0.1)","zIndex":"1"}'></div>
      
      <el-form :style='{"padding":"40px 40px 100px","margin":"0px auto 0px","borderColor":"#e0c9b0 #d2b48c #e0c9b0","borderRadius":"10px","background":"rgba(255, 255, 240, 0.95)","borderWidth":"0px","width":"880px","position":"relative","borderStyle":"solid","height":"auto","zIndex":"2"}'>
        <div v-if="true" :style='{"padding":"0","margin":"0 0 30px 0","overflow":"hidden","color":"#fff","textAlign":"center","background":"#5c3317","width":"100%","lineHeight":"40px","fontSize":"18px","height":"40px","display":"flex","justifyContent":"center","alignItems":"center"}' class="title-container">修改密码</div>
        <div v-if="true" class="list-item" :style='{"width":"60%","margin":"0 auto 40px","position":"relative","alignItems":"center","flexWrap":"wrap","display":"flex"}'>
          <div v-if="true" class="lable" :style='{"color":"#8b4513","left":"-130px","textAlign":"right","width":"120px","lineHeight":"40px","fontSize":"14px","position":"absolute","fontWeight":"600"}'>新密码</div>
          <input :style='{"padding":"0 10px","boxShadow":"inset 0px 0px 24px 0px #f5f0e6","borderColor":"#d2b48c","color":"#666","borderRadius":"4px","borderWidth":"1px","background":"none","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' placeholder="新密码" name="" type="password" v-model="rulesForm.newPassword">
        </div>
        <div v-if="true" class="list-item" :style='{"width":"60%","margin":"0 auto 40px","position":"relative","alignItems":"center","flexWrap":"wrap","display":"flex"}'>
          <div v-if="true" class="lable" :style='{"color":"#8b4513","left":"-130px","textAlign":"right","width":"120px","lineHeight":"40px","fontSize":"14px","position":"absolute","fontWeight":"600"}'>确认新密码：</div>
          <input :style='{"padding":"0 10px","boxShadow":"inset 0px 0px 24px 0px #f5f0e6","borderColor":"#d2b48c","color":"#666","borderRadius":"4px","borderWidth":"1px","background":"none","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' placeholder="确认新密码" name="password" type="password" v-model="rulesForm.confirmPassword">
        </div>
        <div :style='{"width":"auto","margin":"40px 0 0 0px","alignItems":"left","flexWrap":"wrap","justifyContent":"center","display":"flex"}'>
          <el-button :style='{"border":"0px solid #f4ca93","cursor":"pointer","padding":"0","margin":"0 6px","color":"#fff","bottom":"40px","letterSpacing":"4px","width":"120px","right":"40px","outline":"none","borderRadius":"0px","background":"#5c3317","textAlign":"center","fontSize":"16px","position":"absolute","height":"40px","display":"flex","justifyContent":"center","alignItems":"center"}' type="primary" @click="update()" class="loginInBt">修改</el-button>
        </div>
      </el-form>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rulesForm: {
        newPassword: "",
        confirmPassword: ""
      },
    };
  },
  methods: {
    // 修改密码
    update() {
		if (!this.rulesForm.newPassword) {
			this.$message.error("请输入新密码");
			return;
		}
		if (!this.rulesForm.confirmPassword) {
			this.$message.error("请输入确认新密码");
			return;
		}
		if (this.rulesForm.newPassword != this.rulesForm.confirmPassword) {
			this.$message.error("新密码和确认新密码不一致");
			return;
		}
		var url = "";
		url = this.$storage.get("sessionTable") + "/update";
		let data = {
			mima: this.rulesForm.newPassword
		}
		this.$http({
			url: url,
			method: "post",
			data: data
		}).then(({ data }) => {
			if (data && data.code === 0) {
				this.$message({
					message: "修改密码成功,下次登录系统生效",
					type: "success",
					duration: 1500,
					onClose: () => {
					}
				});
			} else {
				this.$message.error(data.msg);
			}
		});
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
      background: url(https://img.freepik.com/free-photo/stack-books-library_23-2147845946.jpg) no-repeat center center / cover, linear-gradient(120deg, #f8f4e9, #d2b48c);
        
  .list-item /deep/ .el-input .el-input__inner {
		border-radius: 4px;
		padding: 0 10px;
		box-shadow: inset 0px 0px 24px 0px #f5f0e6;
		color: #666;
		background: none;
		width: 100%;
		font-size: 14px;
		border-color: #d2b48c;
		border-width: 1px;
		border-style: solid;
		height: 44px;
	  }
}
</style>
